<template>
	<view>
		<view class="search_box">
			<shop-search />
		</view>
		
		<!-- 轮播图 -->
		<swiper 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000"
				:duration="1000" 
				:circular=true>
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator 
					class="swiper-item" 
					:url="'/subpackage/goods_detail/goods_detail?goods_id=' + item.goods_id">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 导航菜单 -->
		<view class="nav_box">
			<view class="nav_item" v-for="(item, index) in navList" :key="index" @click="gotoPage(item)">
				<image class="img" :src="item.image_src" mode="" />
			</view>
		</view>
		
		<!-- 楼层数据信息 -->
		<view class="floor_box">
			<view class="floor_item" v-for="(item, index) in floorList" :key="index">
				<image :src="item.floor_title.image_src" mode="" />
				
				<view class="floor_img_box">
					<!-- 左侧图_1 -->
					<view class="l_box">
						<image 
							:src="item.product_list[0].image_src" 
							mode="widthFix"
							:style="{ width: item.product_list[0].image_width + 'rpx' }"
							@click="gotoGoodsList(index, 0)"
						/>
					</view>
					
					<!-- 右侧图片4 -->
					<view class="r_box">
						<view 
								class="r_box_item" 
								v-for="(item2, index2) in item.product_list" 
								:key="index2"
								v-if="index2 !== 0">
							<image 
								:src="item2.image_src" 
								:style="{width: item2.image_width + 'rpx'}" 
								mode="widthFix" 
								@click="gotoGoodsList(index, index2)"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				swiperList: [],		// 轮播图数据列表
				navList: [],			// 导航栏数据列表
				floorList: [],		// 楼层信息
			};
		},
		methods: {
			// 获取轮播图数据
			async getSwiperLsit() {
				let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/home/swiperdata')
			  res.meta.status !== 200 ? uni.$showMsg() : this.swiperList = res.message
			},
			// 获取导航栏列表
			async getNavList() {
				let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/home/catitems')
				res.meta.status !== 200 ? uni.$showMsg() : this.navList = res.message
			},
			// 获取楼层列表
			async getFloorList() {
				let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/home/floordata')
				res.meta.status !== 200 ? uni.$showMsg() : this.floorList = res.message
			},
			
			// 点击导航菜单跳转页面
			gotoPage(item) {
				// console.log(item.name)
				if (item.name === '分类') {
					uni.switchTab({
						url: '/pages/category/category'
					})
				}
			},
			
			// 点击楼层列表跳转到商品页面
			gotoGoodsList(floot_index, pro_index) {
				// console.log(this.floorList[floot_index].product_list[pro_index].name)
				uni.navigateTo({
					url: '/subpackage/goods_list/goods_list?name=' 
						+ this.floorList[floot_index].product_list[pro_index].name
				})
			}
		},
		onLoad() {
			this.getSwiperLsit();
			this.getNavList();
			this.getFloorList();
		}
	}
</script>

<style lang="scss">
	.search_box {
		position: sticky;
		top: 0;
		z-index: 99999;
	}
	swiper {
		height: 400rpx;
		.swiper-item, image {
			width: 100%;
			height: 100%;
		}
	}
	.nav_box {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		border-bottom: 1px solid #ccc;
		margin-bottom: 10rpx;
		.nav_item {
			width: 130rpx;
			height: 130rpx;
			padding: 10rpx 0;
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.floor_box {
		padding: 10rpx;
		.floor_item {
			image {
				width: 100%;
				height: 60rpx;
			}
			.floor_img_box {
				display: flex;
				justify-content: space-around;
				.l_box {
					
				}
				.r_box {
					display: flex;
					// flex-direction: row;
					justify-content: space-around;
					flex-wrap: wrap;
					padding: 0 0 0 8rpx;
					.r_box_item {
						// width: 180rpx;
						// height: 180rpx;
						image {
							// width: 100%;
							// height: 100%;
						}
					}
				}
			}
		}
	}
</style>
